<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/web/login-and-regist-style.css">
    <title>Logging In</title>
    <style>
      .error-msg {
        color: white;
        background-color: red;
        padding: 10px;
        text-align: center;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.5
        display: <%=(request.getAttribute("msg") == null) ? "none" : "block" %>;
      }
    </style>
  </head>
  <body>
    <div class="log_or_reg">
      <h1>User Login</h1>
      <form action="<%= request.getContextPath() %>/LoginServlet" method="post">
        <div class="login_or_reg_input_box">
          <input type="text" name="username" id="username" required/>
          <label for="username">Username</label>
        </div>
        <div class="login_or_reg_input_box">
          <input type="password" name="password" id="password" required/>
          <label for="password">Password</label>
        </div>
        <a href="javascript:void(0)" onclick="this.closest('form').submit();">Login</a>
      </form>
    </div>

    <%
      String msg = (String) request.getAttribute("msg");
      if (msg != null) {
    %>
    <div class="error-msg">
      <%= request.getAttribute("msg") != null ? request.getAttribute("msg") : "" %>
    </div>
    <%
    }
    %>
  </body>
</html>


